<template>
  <div class="list f-cb">
    <div class="f-cb" style="padding: 5px 0 10px">
      <ul class="typeList f-cb fl">
        <li
          v-for="item in typeList"
          :key="item.period"
          @click="PeriodChange(item.period)"
          :class="OtherSubmit.period == item.period ? 'hover' : ''"
        >
          {{ item.value }}
        </li>
      </ul>
      <el-checkbox v-model="YearOnYear" class="fl YearOnYear">{{
        $t('info.info_balance.56hz5kfs3mc0')
      }}</el-checkbox>
      <div class="rights fr">
        {{ $t('info.info_balance.56hz5kfs48o0') }}
        <el-select
          v-model="value"
          :placeholder="$t('info.info_balance.56hz5kfs4dc0')"
          :popper-append-to-body="false"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="table f-cb">
      <div v-for="(item, parentIndex) in list" :key="item._id">
        <ul v-if="value == parentIndex">
          <li
            v-for="(itemTitle, TitleIndex) in dataList"
            :key="itemTitle.Field"
            class="f-cb"
          >
            <p class="first">{{ itemTitle.title }}</p>
            <p
              class="on sec"
              v-html="ratio(parentIndex, itemTitle.Field, list, itemTitle.show)"
              v-if="YearOnYear"
            ></p>
            <p class="three">
              {{ dealNum(item[itemTitle.Field], itemTitle.show) }}
            </p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import {get_charts} from '@/assets/js/API/info.js';
export default {
  props: ["OtherSubmit", "submit"],
  data() {
    return {
      typeList: [],
      HKEXNav: [
        { period: 4, value: this.$t('info.info_balance.56hz5kfs4gs0'), name: "annual_report" },
        { period: "2:2", value: this.$t('info.info_balance.56hz5kfs4jo0'), name: "Mid_report" },
        { period: "1:1", value: this.$t('info.info_balance.56hz5kfs4nc0'), name: "Quarterly_report" },
        { period: "3:3", value: this.$t('info.info_balance.56hz5kfs4q80'), name: "Q3_report" },
      ],
      USNav: [
        { period: 4, value: "FY" },
        { period: "1:1", value: "Q1" },
        { period: "5:2", value: "Q6" },
        { period: "6:3", value: "Q9" },
      ],
      YearOnYear: true,
      options: [],
      HKEX: [
        // {title:"截止日期",Field:"report_date",show:true},
        // {title:"财报类型",Field:"report_type",show:true},
        { title: this.$t('info.info_balance.56hz5kfs4t40'), Field: "close_date", show: true, name: "lkname22" },
        { title: this.$t('info.info_balance.56hz5kfs4w40'), Field: "currency", show: true, name: "lkname23" },
        { title: this.$t('info.info_balance.56hz5kfs50g0'), Field: "equipment", name: "fkname30" },
        {
          title: this.$t('info.info_balance.56hz5kfs53k0'),
          Field: "cash_equivalents",
          name: "fname2",
        },
        { title: this.$t('info.info_balance.56hz5kfs56g0'), Field: "receivable_accounts", name: "fname3" },
        { title: this.$t('info.info_balance.56hz5kfs5940'), Field: "goods", name: "fname4" },
        {
          title: this.$t('info.info_balance.56hz5kfs5c40'),
          Field: "other_current_assets",
          name: "fname5",
        },
        {
          title: this.$t('info.info_balance.56hz5kfs5f40'),
          Field: "total_current_assets",
          name: "fkname5",
        },
        { title: this.$t('info.info_balance.56hz5kfs5hs0'), Field: "fixed_assets", name: "fkname6" },
        { title: this.$t('info.info_balance.56hz5kfs5ko0'), Field: "investment", name: "fkname7" },
        { title: this.$t('info.info_balance.56hz5kfs5ng0'), Field: "intangible_assets", name: "fkname8" },
        { title: this.$t('info.info_balance.56hz5kfs5r80'), Field: "deferred_income", name: "lkname21" },
        {
          title: this.$t('info.info_balance.56hz5kfs5v40'),
          Field: "other_nocurrent_assets",
          name: "fkname9",
        },
        {
          title: this.$t('info.info_balance.56hz5kfs5zc0'),
          Field: "total_nocurrent_assets",
          name: "fkname10",
        },
        { title: this.$t('info.info_balance.56hz5kfs61w0'), Field: "total_assets", name: "fkname11" },
        { title: this.$t('info.info_balance.56hz5kfs64g0'), Field: "accounts_pay", name: "fkname12" },
        { title: this.$t('info.info_balance.56hz5kfs6740'), Field: "short_term_debt", name: "fkname13" },
        {
          title: this.$t('info.info_balance.56hz5kfs69c0'),
          Field: "other_short_liabilities",
          name: "fkname14",
        },
        {
          title: this.$t('info.info_balance.56hz5kfs6c00'),
          Field: "total_current_liabilities",
          name: "fkname15",
        },
        {
          title: this.$t('info.info_balance.56hz5kfs6e40'),
          Field: "net_current_liabilities",
          name: "fkname16",
        },
        { title: this.$t('info.info_balance.56hz5kfs6gc0'), Field: "long_term_debt", name: "fkname17" },
        { title: this.$t('info.info_balance.56hz5kfs6k00'), Field: "other_long_debt", name: "fkname18" },
        {
          title: this.$t('info.info_balance.56hz5kfs6mc0'),
          Field: "total_nocurrent_liabilities",
          name: "fkname19",
        },
        { title: this.$t('info.info_balance.56hz5kfs6og0'), Field: "total_liabilities", name: "fkname20" },
        { title: this.$t('info.info_balance.56hz5kfs6qw0'), Field: "net_assets", name: "fkname21" },
        { title: this.$t('info.info_balance.56hz5kfs6tg0'), Field: "total_capital_stock", name: "fkname22" },
        { title: this.$t('info.info_balance.56hz5kfs6vk0'), Field: "share_premium", name: "fkname23" },
        { title: this.$t('info.info_balance.56hz5kfs6xw0'), Field: "retained_profit", name: "fkname24" },
        { title: this.$t('info.info_balance.56hz5kfs7000'), Field: "other_reserves", name: "fkname25" },
        { title: this.$t('info.info_balance.56hz5kfs72k0'), Field: "total_reserves", name: "fkname26" },
        { title: this.$t('info.info_balance.56hz5kfs74w0'), Field: "shareholders_rights", name: "fkname27" },
        { title: this.$t('info.info_balance.56hz5kfs7740'), Field: "minority_interest", name: "fkname28" },
        { title: this.$t('info.info_balance.56hz5kfs79k0'), Field: "aggregate_interest", name: "fkname29" },
      ],
      CNH: [
        // {title:"交易所市场",Field:"market",show:true},
        {
          title: this.$t('info.info_balance.56hz5kfs7bo0'),
          Field: "report_date",
          show: true,
          name: "lhname57",
        },
        // {title:"财报类型",Field:"report_type",show:true},
        {
          title: this.$t('info.info_balance.56hz5kfs7e00'),
          Field: "cash_bank",
          name: "fhname1",
        },
        { title: this.$t('info.info_balance.56hz5kfs7h40'), Field: "dismantle_funds", name: "fhname2" },
        { title: this.$t('info.info_balance.56hz5kfs5hs0'), Field: "fixed_asset", name: "fhname3" },
        { title: this.$t('info.info_balance.56hz5kfs5ng0'), Field: "intangible_asset", name: "fhname4" },
        { title: this.$t('info.info_balance.56hz5kfs7jo0'), Field: "defer_asset", name: "fhname5" },
        { title: this.$t('info.info_balance.56hz5kfs7ms0'), Field: "total_assets", name: "fhname6" },
        { title: this.$t('info.info_balance.56hz5kfs7p80'), Field: "short_loan", name: "fhname7" },
        { title: this.$t('info.info_balance.56hz5kfs7rc0'), Field: "account_pay", name: "fhname8" },
        { title: this.$t('info.info_balance.56hz5kfs7to0'), Field: "withdrawal_funds", name: "fhname9" },
        {
          title: this.$t('info.info_balance.56hz5kfs7w00'),
          Field: "defer_liabilities",
          name: "fhname10",
        },
        {
          title: this.$t('info.info_balance.56hz5kfs7y80'),
          Field: "other_total_payables",
          name: "fhname11",
        },
        {
          title: this.$t('info.info_balance.56hz5kfs81k0'),
          Field: "other_current_liabilities",
          name: "fhname12",
        },
        {
          title: this.$t('info.info_balance.56hz5kfs6c00'),
          Field: "total_current_liabilities",
          name: "fhname13",
        },
        { title: this.$t('info.info_balance.56hz5kfs83s0'), Field: "long_pay", name: "fhname14" },
        {
          title: this.$t('info.info_balance.56hz5kfs6mc0'),
          Field: "total_nocurrent_liabilities",
          name: "fhname15",
        },
        { title: this.$t('info.info_balance.56hz5kfs8600'), Field: "total_liabilities", name: "fhname16" },
        {
          title: this.$t('info.info_balance.56hz5kfs8880'),
          Field: "capital_pay",
          name: "fhname17",
        },
        {
          title: this.$t('info.info_balance.56hz5kfs8ac0'),
          Field: "sum_parent_equity",
          name: "fhname18",
        },
        { title: this.$t('info.info_balance.56hz5kfs7740'), Field: "minority_interest", name: "fhname19" },
        { title: this.$t('info.info_balance.56hz5kfs8cw0'), Field: "total_equity", name: "fhname20" },
        {
          title: this.$t('info.info_balance.56hz5kfs8f40'),
          Field: "sum_liabsh_equity",
          name: "fhname21",
        },
      ],
      US: [
        // {title:"报告日期",Field:"report_date",show:true},
        // {title:"财报类型",Field:"report_type",show:true},
        { title: this.$t('info.info_balance.56hz5kfs4t40'), Field: "close_date", show: true, name: "lkname22" },
        { title: this.$t('info.info_balance.56hz5kfs4w40'), Field: "currency", show: true, name: "lkname23" },
        { title: this.$t('info.info_balance.56hz5kfs53k0'), Field: "cash", name: "fname2" },
        { title: this.$t('info.info_balance.56hz5kfs56g0'), Field: "accounts_receivable", name: "fname3" },
        { title: this.$t('info.info_balance.56hz5kfs5940'), Field: "goods", name: "fname4" },
        {
          title: this.$t('info.info_balance.56hz5kfs5c40'),
          Field: "other_current_assets",
          name: "fname5",
        },
        { title: this.$t('info.info_balance.56hz5kfs8hw0'), Field: "other_receivables", name: "fname6" },
        {
          title: this.$t('info.info_balance.56hz5kfs8k40'),
          Field: "securities_investment_current",
          name: "fname7",
        },
        {
          title: this.$t('info.info_balance.56hz5kfs5f40'),
          Field: "total_current_assets",
          name: "fname8",
        },
        { title: this.$t('info.info_balance.56hz5kfs8mg0'), Field: "equipment", name: "fname9" },
        {
          title: this.$t('info.info_balance.56hz5kfs5v40'),
          Field: "other_nocurrent_assets",
          name: "fname10",
        },
        {
          title: this.$t('info.info_balance.56hz5kfs8os0'),
          Field: "securities_investment_nocurrent",
          name: "fname11",
        },
        {
          title: this.$t('info.info_balance.56hz5kfs5zc0'),
          Field: "total_nocurrent_assets",
          name: "fname12",
        },
        { title: this.$t('info.info_balance.56hz5kfs61w0'), Field: "total_assets", name: "fname13" },
        { title: this.$t('info.info_balance.56hz5kfs64g0'), Field: "accounts_pay", name: "fname14" },
        { title: this.$t('info.info_balance.56hz5kfs6740'), Field: "floating_debt", name: "fname15" },
        { title: this.$t('info.info_balance.56hz5kfs8qw0'), Field: "deferred_income", name: "fname16" },
        {
          title: this.$t('info.info_balance.56hz5kfs81k0'),
          Field: "other_current_liabilities",
          name: "fname17",
        },
        {
          title: this.$t('info.info_balance.56hz5kfs8t00'),
          Field: "other_project_liabilities",
          name: "fname18",
        },
        {
          title: this.$t('info.info_balance.56hz5kfs6c00'),
          Field: "total_current_liabilities",
          name: "fname19",
        },
        { title: this.$t('info.info_balance.56hz5kfs8vc0'), Field: "long_liabilities", name: "fname20" },
        {
          title: this.$t('info.info_balance.56hz5kfs8yo0'),
          Field: "other_nocurrent_liabilities",
          name: "fname21",
        },
        {
          title: this.$t('info.info_balance.56hz5kfs6mc0'),
          Field: "total_nocurrent_liabilities",
          name: "fname22",
        },
        { title: this.$t('info.info_balance.56hz5kfs6og0'), Field: "total_liabilities", name: "fname23" },
        { title: this.$t('info.info_balance.56hz5kfs90w0'), Field: "common_stock", name: "fname24" },
        { title: this.$t('info.info_balance.56hz5kfs9380'), Field: "retained_earnings", name: "fname25" },
        {
          title: this.$t('info.info_balance.56hz5kfs95c0'),
          Field: "other_comprehensive_income",
          name: "fname26",
        },
        {
          title: this.$t('info.info_balance.56hz5kfs97o0'),
          Field: "sum_parent_equity",
          name: "fname27",
        },
        { title: this.$t('info.info_balance.56hz5kfs8cw0'), Field: "total_equity", name: "fname28" },
        {
          title: this.$t('info.info_balance.56hz5kfs99s0'),
          Field: "sum_liabsh_equity",
          name: "fname29",
        },
        {
          title: this.$t('info.info_balance.56hz5kfs9bw0'),
          Field: "accounting_standard",
          show: true,
          name: "fname30",
        },
      ],
      dataList: [],
      stock: {},
      value: 0,
      list: [],
      lang: "zh-CN",
    };
  },
  created() {
    this.lang = localStorage.getItem("lang");
  },
  mounted() {
    var _this = this;
    _this.$nextTick(function () {
      setTimeout(function () {
        if (_this.submit.market == "HKEX") {
          _this.typeList = _this.HKEXNav;
          _this.dataList = _this.HKEX;
        } else if (
          _this.submit.market == "SSE" ||
          _this.submit.market == "SZSE"
        ) {
          _this.typeList = _this.HKEXNav;
          _this.dataList = _this.CNH;
        } else if (_this.submit.market == "US") {
          _this.typeList = _this.USNav;
          _this.dataList = _this.US;
        }
        _this.getCharts();
      }, 100);
    });
  },
  methods: {
    PeriodChange(period) {
      this.OtherSubmit.period = period;
      this.getCharts();
    },
    //获取详情数据
    getCharts() {
      var _this = this;
      //console.log(_this.submit,'submit')
        get_charts({
            symbol: _this.submit.symbol,
            market: _this.submit.market,
            securityType: _this.submit.securityType,
            type: _this.OtherSubmit.type,
            period: _this.OtherSubmit.period,
          }).then(function (res) {
          if (res.code == 1) {
            _this.list = res.data.list;
            _this.options = [];
            _this.list.forEach(function (res, index) {
              _this.options.push({ value: index, label: res.report_date });
            });
            console.log(_this.options);
            _this.stock = res.data.data.symbol;
          } else {
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    dealNum: function (num, show) {
      if (show) {
        return num;
      }
      if (num == "--" || num == "") {
        return "--";
      }
      let number = Number(num);
      if (number == 0) {
        return 0;
      } else if (this.lang == "zh-CN") {
        if (Math.abs(number) >= 100000000) {
          return (number / 100000000).toFixed(2) + this.$t('info.info_balance.56hz5kfs9e00');
        } else if (Math.abs(number) < 100000000 && Math.abs(number) >= 10000) {
          return (number / 10000).toFixed(2) + this.$t('info.info_balance.56hz5kfs9gc0');
        } else {
          return number.toFixed(2);
        }
      } else if (this.lang == "en") {
        if (Math.abs(number) >= 1000000000) {
          return (number / 1000000000).toFixed(2) + "B";
        } else if (
          Math.abs(number) >= 1000000 &&
          Math.abs(number) < 1000000000
        ) {
          return (number / 1000000).toFixed(2) + "M";
        } else if (Math.abs(number) >= 1000 && Math.abs(number) < 1000000) {
          return (number / 1000).toFixed(2) + "K";
        } else {
          return number;
        }
      }
    },
    ratio(index, value, obj, show) {
      if (show) {
        return "";
      }
      /**
       *
       * index  当前数据 即item
       * value  当前字段名
       * obj    所有的数据（总数据）
       * show   是否处理
       *
       * **/
      var number = 1;
      if (obj.length <= index + 1) {
        return `<span>--</span>`;
      }
      //许将算出的list进行判断 等于 NaN的时候显示--
      var list = (
        ((obj[index][value] - obj[index + number][value]) /
          obj[index + number][value]) *
        100
      ).toFixed(2);
      list = ["NaN", "-NaN", "Infinity", "-Infinity"].includes(list)
        ? "--"
        : list;
      // classList 颜色判断
      var classList = list == "--" || list == 0 ? "" : list > 0 ? "on" : "in";
      return `<span class="${classList}">${
        list == "--" ? "--" : list + "%"
      }</span>`;
    },
  },
  watch: {
    submit: {
      handler(val) {
        var _this = this;
        if (_this.submit.market == "HKEX") {
          _this.typeList = _this.HKEXNav;
          _this.dataList = _this.HKEX;
        } else if (
          _this.submit.market == "SSE" ||
          _this.submit.market == "SZSE"
        ) {
          _this.Nav = _this.HKEXNav;
          _this.dataList = _this.CNH;
        } else if (_this.submit.market == "US") {
          _this.Nav = _this.USNav;
          _this.dataList = _this.US;
        }
        this.getCharts();
      },
      deep: true,
    },
  },
  filters: {},
};
</script>
<style lang="less">
.list {
  width: 100%;
  .typeList {
    li {
      float: left;
      font-size: 12px;
      color: @fbSix;
      line-height: 20px;
      margin-right: 20px;
      cursor: pointer;
    }
    li.hover {
      color: @hoverColor;
    }
  }
  .YearOnYear {
    color: @fff;
    font-size: 12px;
    line-height: 20px;
    .el-checkbox__inner {
      border: 1px solid @fbSix;
      background: none;
    }
    .is-checked .el-checkbox__inner {
      border: 1px solid @hoverColor;
      background: none;
    }
    .el-checkbox__inner::after {
      border: 1px solid @hoverColor;
      border-left: 0;
      border-top: 0;
    }
    .el-checkbox__label {
      font-size: 12px;
    }
  }
  .rights {
    font-size: 12px;
    color: @fff;
    line-height: 20px;
    .el-select {
      width: 100px;
    }
    .el-input__inner {
      height: 20px;
      line-height: 20px;
      background: none;
      border: none;
      font-size: 12px;
      padding: 0 5px;
      color: @fff;
    }
    .el-input__icon {
      line-height: 20px;
    }
  }
  .table {
    width: 100%;
    border: 1px solid @LightBorderLine;
    ul {
      width: 100%;
      li {
        font-size: 12px;
        color: @fbSix;
        border-bottom: 1px solid @LightBorderLine;
        line-height: 24px;
        p {
          padding: 0 10px;
        }
        .first {
          width: 50%;
          float: left;
          box-sizing: border-box;
        }
        .sec {
          float: left;
          width: 25%;
          color: @fff;
          border-left: 1px solid @LightBorderLine;
          box-sizing: border-box;
        }
        .three {
          float: right;
          width: 25%;
          color: @fff;
          border-left: 1px solid @LightBorderLine;
          box-sizing: border-box;
        }
      }
    }
  }
}
.el-popper li.el-select-dropdown__item {
  padding: 0;
  text-align: center;
}
</style>